<template>
  <el-dialog
    :title="title"
    :visible="visible"
    @close="$emit('update:visible', false)"
  >
    <el-form v-loading="loading" :model="managerForm" :rules="managerFormRules" label-width="100px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="managerForm.name" placeholder="2-10个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="managerForm.code" placeholder="2-10个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="managerId">
        <!-- <el-input placeholder="" v-model="managerForm.mangerId" /> -->
        <el-select
          v-model="managerForm.managerId"
          placeholder="请选择部门负责人"
          style="width: 100%"
        >
          <el-option
            v-for="item in managerList"
            :key="item.id"
            :value="item.id"
            :label="item.username"
          /> </el-select></el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          v-model="managerForm.introduce"
          type="textarea"
          placeholder="2-100个字符"
          maxlength="100"
          minlength="2"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button>取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getDepartmentsManager, addDepartment, editDepartment } from '@/api/department'
import { getDepartments, getDepartment } from '@/api/department'

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    pid: {
      type: Number,
      required: true
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validateCode = (rule, value, callback) => {
      if (this.isEdit) {
        // 编辑逻辑
        const arr = this.depts.filter((item) => item.pid === this.managerForm.pid && item.id !== this.managerForm.id)
        return arr.some(item => item.code === value) ? callback(new Error('部门不能重复'))
          : callback()
      } else {
        // 新增逻辑
        const arr = this.depts.filter((item) => item.pid === this.pid)
        return arr.some((item) => item.code === value)
          ? callback(new Error('部门编码不能重复'))
          : callback()
      }
    }
    return {
      depts: [],
      loading: true,
      managerForm: {
        code: '',
        introduce: '',
        managerId: '',
        name: ''
      },
      managerFormRules: {
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '部门编码长度为2-10个字符',
            trigger: 'blur'
          },
          { validator: validateCode, trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 100,
            message: '部门介绍长度为2-100个字符',
            trigger: 'blur'
          }
        ],
        managerId: [
          { required: true, message: '部门负责人不能为空', trigger: 'change' }
        ],
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '部门名称长度为2-10个字符',
            trigger: 'blur'
          },
          // 添加的是子部门,所以添加的时候把当前这个部门的id作为pid来找所有的子部门，看有没有重复
          {
            validator: (rule, value, callback) => {
              if (this.isEdit) {
              // 编辑逻辑
                const arr = this.depts.filter((item) => item.pid === this.managerForm.pid && item.id !== this.managerForm.id)
                return arr.some(item => item.name === value) ? callback(new Error('部门不能重复'))
                  : callback()
              } else {
                // 新增逻辑
                const arr = this.depts.filter((item) => item.pid === this.pid)
                return arr.some((item) => item.name === value)
                  ? callback(new Error('子部门不能重复'))
                  : callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      managerList: []
    }
  },
  computed: {
    title() {
      return this.isEdit ? '编辑部门' : '新增子部门'
    }
  },
  async created() {
    if (this.isEdit) {
      this.managerForm = await getDepartment(this.pid)
    }
    this.loading = false
    await this.getDepartmentsManager()
    this.depts = await getDepartments()
  },
  methods: {
    async getDepartmentsManager() {
      const res = await getDepartmentsManager()
      this.managerList = res
      console.log(this.managerList)
    },
    async handleConfirm() {
      if (this.isEdit) {
        // 新增的逻辑
        await editDepartment(this.managerForm)
        this.$emit('update:visible', false)
        this.$emit('updateDept')
      } else {
      // 新增的逻辑
        this.managerForm.pid = this.pid
        await addDepartment(this.managerForm)
        this.$emit('update:visible', false)
        this.$emit('updateDept')
      }
    }
  }
}

</script>

<style scoped lang='scss'></style>
